<template>
	<view class="c-devide" :style="containerStyle">
		<text class="line" :style="{ backgroundColor: lineColor, flex: `0 0 ${lineWidth}rpx` }"></text>
		<text class="title" :style="titleStyle">{{ title }}</text>
		<text class="line" :style="{ backgroundColor: lineColor, flex: `0 0 ${lineWidth}rpx` }"></text>
	</view>
</template>

<script setup>
	const props = defineProps({
		titleStyle: [String, Object],
		containerStyle: [String, Object],
		title: String,
		lineColor: String,
		lineWidth: Number
	});
</script>

<style lang="scss">
	.c-devide {
		@include f-center;
		padding: $margin-24;
		.line {
			flex: 1;
			height: 1rpx;
			background-color: mix($black-color, $bg-color, 5%);
		}
		.title {
			margin: 0 $margin-16;
			font-size: $font-30;
			color: $main-color;
		}
	}
</style>
